<script src="../../../../360MoveData/Users/asus/Desktop/demo/readfile.js"></script>
<template>
  <div class="details">
<!--    <h2>这是详情页</h2>-->
    <router-link to="/index">
      <img src="../../../src/assets/images/details/20200719171702.png" alt="" class="imgtop">
    </router-link>
    <div class="album">
        <div class="album_left">
          <img :src="imglist[2].images" alt="">
          <img :src="imglist[3].images" alt="" class="album_above">
          <p>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-listen"></use>
            </svg>
            <span>6057.96万</span>
          </p>
        </div>
        <div class="album_right">
          <div>
            <h2>总裁的替身新娘 免费|精品|双播|言情</h2>
            <p><img :src="imglist[0].images" alt="">青歌沁声</p>
          </div>
          <p>已订阅14.95万人</p>
        </div>
    </div>
    <div class="details_cont">
      <p>“替嫁”新娘VS权势滔天“腿疾老男人”开挂甜宠日常
        <svg class="icon" aria-hidden="true" @click="change()" :class="{current:msg==1}">
          <use xlink:href="#icon-xiala-"></use>
        </svg>
      </p>
      <div class="details_contall" v-show="msg==1">
        <div class="des">
          <p>
            正版授权，免费精品双播，青歌沁声精心演播制作，520心动上线！
            每晚18：00点，更新3集，破100万收听日更6集,准备好开启一段缤纷的浪漫旅程了吗？！</p>
        </div>
        <div class="details_contimg">
          <span>喜马周推荐</span>
          <p>第二季 第十五期 下滑更有惊喜福利呦～</p>
<!--            这是图片-->
          <div class="this_img">
            <img :src="imglist[1].images" alt="">
          </div>
          <span>内容简介</span>
          <p>被叔叔算计，初九月嫁了给A市权势滔天却双腿残疾的“老男人”。 婚后，男人宠她入骨不说，还慢悠悠地从轮椅上站起。 她吓得惊慌失色，“你，你，你的脚不是不能动吗？” “那是对外的。”男人步步逼近，看着毫无顾忌在他面前全裸的女人，邪魅一笑，“现在，也该是时候行使，作为男人的权力了。”</p>
          <span>作者／主播简介</span>
          <p>作者简介：不是猫的喵，网络小说作家 <br>
            主播简介：青歌沁声，实力演播人，优秀制作人；声线圆润饱满大气，演播风格可飒可甜
            代表作：《琉璃美人煞》、《凤还巢之悍妃有毒》、《神赌狂后》</p>
        </div>
      </div>
    </div>
    <div class="openApp">
      <button>打开APP，完整收听</button>
    </div>
<!--    节目-->
    <div class="details_contlist">
      <h2>节目({{jiemulist.length}})</h2>
      <ul>
        <li v-for="(item,index) in jiemulist">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-play"></use>
            </svg>
            <span>{{item.title}}</span>
          </div>
        </li>
        <li class="details_more" @click="change">
          <p v-if="msg==0">
            加载更多
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-tubiao-"></use>
            </svg>
          </p>
          <div v-if="msg==1" v-for="(item,index) in morelist">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-play"></use>
            </svg>
            <span>{{item.title}}</span>
          </div>
          <p v-if="msg==1">
            加载更多
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-tubiao-"></use>
            </svg>
          </p>
        </li>
      </ul>
    </div>
<!--    相似专辑-->
    <div class="similar">
      <h2>相似专辑</h2>
      <p>
        <span>
          8090
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tubiao-"></use>
          </svg>
        </span>
        <span>上班族
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tubiao-"></use>
          </svg>
        </span>
        <span>双人播
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tubiao-"></use>
          </svg>
        </span>
      </p>
      <ul>
        <li>
          <div class="con_top">
            <ul>
              <li v-for="(item,index) in similarlist">
                <div class="cont_images">
                  <img :src="item.images" alt="">
                  <p>
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-play"></use>
                    </svg>
                    <span>{{item.listen}}</span>
                  </p>
                </div>
                <p>{{item.imgtitle}}</p>
              </li>
            </ul>
          </div>
        </li>
      </ul>
      <div @click="changeMadom()">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shuaxin"></use>
        </svg>
        换一换
      </div>
    </div>
<!--    主播信息-->
    <div class="info">
      <h2>主播信息</h2>
      <div class="info_top">
        <div class="infotop_left">
          <img :src="imglist[0].images" alt="">
          <span>v12</span>
        </div>
       <div class="infotop_center">
          <h2>清歌沁声</h2>
          <span>不忘初心�伴你同行</span>
          <span>30.76万</span>
        </div>
        <div class="infotop_right">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tianjiayonghu"></use>
          </svg>
          <span>加关注</span>
        </div>
      </div>
      <ul>
        <li>
          <div class="con_top">
            <ul>
              <li v-for="(item,index) in infolist">
                <div class="cont_images">
                  <img :src="item.images" alt="">
                  <p>
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-play"></use>
                    </svg>
                    <span>{{item.listen}}</span>
                  </p>
                </div>
                <p>{{item.imgtitle}}</p>
              </li>
            </ul>
          </div>
        </li>
      </ul>
      <p>
        <a href="">进入主页
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tubiao-"></use>
          </svg>
        </a>
      </p>
    </div>
<!--    喜马拉雅经典必听-->
    <div class="similar mustlisten">
      <h2>喜马拉雅经典必听</h2>
      <p>
        <span>
          娱乐
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tubiao-"></use>
          </svg>
        </span>
        <span>
          人文
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tubiao-"></use>
          </svg>
        </span>
        <span>
          相声评书
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tubiao-"></use>
          </svg>
        </span>
        <span>
          儿童
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tubiao-"></use>
          </svg>
        </span>
      </p>
      <ul>
        <li v-for="(item,index) in mustlisten">
          <div class="cont">
            <div class="con_left">
              <img :src="item.images" alt="">
            </div>
            <div class="con_right">
              <h2>{{item.title}}</h2>
              <span>{{item.des}}</span>
              <p>
                <span class="span_left">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sort"></use>
                  </svg>
                  {{item.type}}
                </span>
                <span class="">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sound-wave"></use>
                  </svg>
                  {{item.listen}}
                </span>
                <span class="">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-listen"></use>
                  </svg>
                  {{item.comment}}
                </span>
              </p>
            </div>
          </div>
        </li>
      </ul>
      <div class="details_more">
        <p>
          查看更多
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tubiao-"></use>
          </svg>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        // name: "details"
      data(){
        return{
          msg:0,
          jiemulist:[],
          morelist:[],
          similarlist:[],
          infolist:[],
          //一些无法直接显示在本页面的图片
          imglist:[
            {
              images:'./data/src/assets/images/details/wKgLelzrB8KQu33NAAHlphMLsyA974.jpg!op_type=5&device_type=ios&name=web_meduim&upload_type=cover&magick=webp'
            },
            {
              images:'./data/src/assets/images/details/wKgPC17UqxayDuXUABBWwE8z-Pc55.jpeg'
            },
            {
              //总裁的替身新娘 免费|精品|双播|言情
              images:'./data/src/assets/images/details/wKgPC17VxUXi__CkAA1R2FgN8bg201%20(2).JPG!op_type=3&columns=144&rows=144&magick=webp'
            },
            {
              images: './data/src/assets/images/details/listen_pic_album@3x_d18f4f7.png'
            }
          ],
          mustlisten:[]
        }
      },
      methods:{
        change(){
          if (this.msg==0){
            this.msg=1;
          }else {
            this.msg=0;
          }
          console.log(this.msg);
        },
        changeMadom(){
          //1.用index（未完成）
          // var index = Math.floor([this.similarlist.length-1]*Math.random());
          // console.log(index);
          // this.similarlist.index = index;
          // console.log(this.similarlist.index)

          //2.用sort排序生成随机数组
          var arr = this.similarlist;
          // console.log(arr);
          arr.sort(()=>{
            return Math.round(Math.random())-0.5;
          })
          // console.log(arr);
        }
      },
      mounted() {
        var _this=this;
        this.$http.get('./data/details.json')
          .then((response)=>{
            //成功之后的
            this.jiemulist=response.data.jiemulist;
            this.morelist=response.data.morelist;
            this.similarlist=response.data.similarlist;
            this.infolist=response.data.infolist;
            this.mustlisten=response.data.mustlisten;
            // console.log(response.data);
            // console.log(jiemulist);
          })
          .catch(function (err) {
            //失败的
            console.log(err);
          })
          .then(function () {
            //总会执行的
            //always executed
          })
      }
    }
</script>

<style scoped>
  .details .imgtop{
    width: 100%;
  }
  .details .current{
    transform: rotate(180deg);
  }
  .details>img{
    width: 100%;
  }
  .album{
    position: relative;
    top: -5px;
    padding: 20px;
    display: flex;
    align-content: center;
    /*transform: scale(2);*/
    /*filter: blur(15px);*/
    background-image: linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,.25) 100%);
    /*background-position: center center;*/
    /*background-size: 100% 100%;*/
    /*background-repeat: no-repeat;*/
    /*background-image: url("./src/assets/images/details/wKgPC17VxUXi__CkAA1R2FgN8bg201%20(2).JPG!op_type=3&columns=144&rows=144&magick=webp");*/
  }
  .album .album_left{
    width: 35%;
    /*border: 1px solid palevioletred;*/
    position: relative;
  }
  .album .album_left>img{
    width: 100%;
  }
  .album .album_left>.album_above{
    width: 25%;
    position: absolute;
    top: 0;
  }
  .album .album_left>p{
    /*margin: 10px 0;*/
    position: absolute;
    bottom: 25%;
    left: 3%;
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    background-image:linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,.25) 100%) ;
  }
  .album .album_left>p>span{
    /*color: #999;*/
    /*margin-left: 20px;*/
  }
  .album_right{
    padding-left: 20px;
    display: flex;
    flex-direction: column;
  }
  .album_right>div{
    border-bottom: 1px solid rgba(255,255,255,.4);
    padding-bottom: 10px;
  }
  .album_right div>h2{
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 700;
  }
  .album_right div>p{
    font-size: 12px;
  }
  .album_right div>p>img{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 5px;
    /*background: url("./src/assets/images/details/wKgLelzrB8KQu33NAAHlphMLsyA974.jpg!op_type=5&device_type=ios&name=web_meduim&upload_type=cover&magick=webp");*/
  }
  .album_right>p{
    padding-top: 10px;
    font-size: 12px;
  }
  /*这是描述的内容*/
  .details_cont{
    color: rgba(0,0,0,.8);
    margin-bottom: 20px;
  }
  .details_cont>p{
    font-size: 14px;
    padding: 10px 10px 0;
    position: relative;
    /*border:1px solid #f86442;*/
  }
  .details_cont>p>svg{
    position: absolute;
    right: 1%;
    color: #f60;
  }
  .des p{
    margin-top: 5px;
    padding: 0 20px;
    word-break: break-all;
    line-height: 21px;
    font-size: 14px;
  }
  /*这是下面描述 里 带图片内容*/
  .details_contimg{
    padding: 0 20px;
    font-size: 14px;
  }
  .details_contimg>span{
    display: block;
    padding: 5px;
    margin: 10px 0px;
    background: #FC5832;
    width: 22%;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
  }
  .details_contimg .this_img>img{
    width: 100%;
    margin-top: 10px;
  }
  .details_contimg>span:nth-of-type(3){
    width: 34%;
  }
  /*打开APP，完整收听*/
  .openApp{
    display: flex;
    justify-content: center;
  }
  .openApp button{
    color: #FFFFFF;
    width: 235px;
    margin: 0 auto;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.2);
    font-weight: 700;
    border-radius: 100px;
    padding: 10px 0;
    line-height: 1.4;
    font-size: 15px;
    /*box-sizing: border-box;*/
    /*text-align: center;*/
    background-image: linear-gradient(-269deg,#ff8b70 2%,#f86442 99%);
    /* keyframe名称  完成动画所花费的时间 动画的速度曲线 在动画开始之前的延迟 动画应该播放的次数 是否应该轮流反向播放动画*/
    animation: pulse .5s linear 0s infinite alternate;
  }
  @keyframes pulse {
    0%{
      transform: scale(1);
    }
    100%{
      transform: scale(1.05);
    }
  }
  /*节目列表*/
  .details_contlist{
    padding: 10px 20px 0;
  }
  .details_contlist>h2{
    padding: 10px 0 0;
    font-size: 18px;
    line-height: 1.39;
    color: #333333;
    font-weight: 700;
  }
  .details_contlist>ul li,.details_more>div{
    border-bottom:1px solid #f3f4f5;
    margin-bottom: 10px;
    padding: 10px 0 20px;
  }
  .details_contlist>ul li div{
    display: flex;
    align-content: center;
  }
  .details_contlist>ul li div>svg{
    /*border: 1px solid red;*/
    font-size: 2em;
    color: #999999;
  }
  .details_contlist>ul li div>span{
    display: block;
    width: 80%;
    margin-left: 10px;
    /*border: 1px solid lime;*/
  }
  /*加载更多*/
  .details_contlist .details_more{
    border-bottom: none;
    padding: 0;
  }
  .details_more>p{
    text-align: center;
    font-size: 15px;
    color: #f86442;
    padding: 17px 0;
    line-height: 1.4;
    font-weight: 700;
  }
  /*相似专辑*/
  .similar,.info{
    /*background-color: #55a532;*/
    /*height: 300px;*/
    padding: 0 20px;
  }
  .similar>h2,.info>h2{
    font-size: 18px;
    padding-bottom: 10px;
    line-height: 1.38;
    color: #333;
    font-weight: 700;
  }
  .similar>p>span{
    display: inline-block;
    /*color: #f86442;*/
    font-size: 14px;
    border-radius: 14px;
    padding: 4px 4px 4px 12px;
    margin-right: 8px;
    background-color: #f3f4f5;
  }
  /*相似专辑的图片内容*/
  .con_top>ul{
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
    justify-content: space-around;
  }
  .con_top>ul li{
    font-size: 13px;
    width: 30%;
    margin: 10px 10px 0 0;
  }
  .con_top>ul li>p{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp:2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
  }
  .con_top>ul li .cont_images{
    width: 100%;
    position: relative;
  }
  .con_top>ul li .cont_images img{
    width: 100%;
    border-radius: 0 0 4px 4px;
  }
  .con_top>ul li .cont_images>p{
    position: absolute;
    bottom: 3px;
    background-image:linear-gradient(180deg,rgba(3,3,3,0) 9%,rgba(0,0,0,1.58) 100%);
    z-index: 1;
    left: 0;
    width: 100%;
    height: 23px;
    border-radius: 0 0 4px 4px;
  }
  .con_top>ul li .cont_images>p svg{
    margin: 0 3px;
    color: #aeaeae;
  }
  .con_top>ul li .cont_images>p span{
    font-size: 12px;
    color: #FFFFFF;
    letter-spacing: .34px;
    vertical-align: middle;
  }
  /*换一换*/
  .similar>div{
    background-color: #F24821;
    width: 22%;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    border-radius: 14px;
    margin: 10px auto;
    padding: 7px 10px;
  }
  /*主播信息*/
  .info .info_top{
    display: flex;
    flex-wrap: nowrap;
    /*border: 1px solid red;*/
  }
  .info .infotop_left{
    width: 20%;
    /*border: 1px solid yellowgreen;*/
    position: relative;
  }
  .info .infotop_left img{
    width: 100%;
  }
  .info .infotop_left span{
    position: absolute;
    bottom: -6px;
    left: 20%;
    background-color: #36D6FB;
    border-radius: 14px;
    padding: 3px 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
  }
  .info .infotop_center{
    width: 66%;
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    /*border:1px solid darkcyan;*/
  }
  .info .infotop_center>h2{
    color: #333333;
  }
  .info .infotop_center>span{
    color: #999999;
    font-size: 12px;
    line-height: 17px;
  }
  .info .infotop_right{
    width: 14%;
    padding-left: 10px;
    display: flex;
    font-size: 14px;
    color: #f86442;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    /*border:1px solid rebeccapurple;*/
  }
  .info .infotop_right>svg{
    font-size: 24px;
    margin-left: 20%;
  }
  /*进入主页*/
  .info>p{
    text-align: center;
    font-size: 16px;
  }
  .info>p>a{
    color: #111111;
  }
  /*喜马拉雅经典必听*/
  .mustlisten>h2{
    padding: 20px 0;
  }
  .mustlisten>ul>li{
    border-bottom: 1px solid #f3f4f5;
  }
  /*li的内容*/
  .cont{
    display: flex;
    /*background-color: palevioletred;*/
    margin-bottom: 10px;
    margin-top: 20px;
  }
  .con_left{
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    /*background-color: #fa2800;*/
  }
  .con_left img{
    width: 100%;
    border-radius: 4px;
  }
  .con_right{
    /*border:1px solid blue;*/
    width: 66%;
    padding: 10px 0px 10px 10px
  }
  .con_right>h2{
    color: #333;
    font-size: 16px;
    line-height: 1.38;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .con_right>span{
    font-size: 13px;
    color: #999;
    line-height: 1.38;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
  }
  .con_right>p{
    margin: 10px 0;
  }
  .con_right>p>span{
    font-size: 12px;
    color: #999;
    margin-left: 20px;
  }
  .con_right .span_left{
    margin-left: 0px;
  }
  /*查看更多*/
  .mustlisten .details_more{
    border-bottom: none;
    padding: 0;
    width: 100%;
    background-color: #FFFFFF;
  }
  .mustlisten .details_more>p{
    text-align: center;
    font-size: 15px;
    color: #f86442;
    padding: 17px 0;
    line-height: 1.4;
    font-weight: 700;
  }

</style>
